<template>
	<view class="nearby-header" :style="{background:AppSkin.gradientPrimary}">
		<image class="nearby-header-bg" :src="$staticPath('nearby-head.png')" mode=""></image>
		<view class="nearby-box e-flex">
			<view class="e-flex e-m-r-30 nearby-addr" @tap="$goTo('/pages/nearby/city')">
				<image :src="$staticPath('white-position.png')" class="img-44 e-m-r-20"></image>
				<text class="e-line-1 e-flex-1 c-white">{{ text }}</text>
			</view>
			<view class="e-flex-1 nearby-header__search e-font-26 e-p-l-20 e-flex e-flex-between"
				@tap="$goTo('/pages/nearby/search')">
				<view class="e-flex">
					<view class="serach-font" :style="{color: AppSkin.primary}">

					</view>
					<text class="c-secondary">{{ $t('nearby.search') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: String
		}
	}
</script>

<style lang="scss" scoped>
	.serach-font {
		font-family: "allFontIconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		&:before {
			content: "\e609";
		}
	}

	.nearby-header {
		position: relative;
		height: 154rpx;

		.nearby-header-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
		}

		.nearby-box {
			width: 100%;
			position: relative;
			z-index: 2;
			padding: 20rpx 20rpx 0 20rpx;
		}

		.nearby-addr {
			width: 204rpx;
		}

		&__search {
			background-color: #fff;
			border-radius: 34rpx;
			height: 68rpx;

			&-btn {
				padding: 12rpx 32rpx;
				background: var(--color-primary);
				border-radius: 30rpx;
			}
		}
	}
</style>